<template>
    <div id="noticeManage">
        <div class="pl-3 mt-3">综合数据管理</div>
        <hr>
        <div class="d-flex justify-content-around align-items-center">
            <div class="border p-3 font_size_18 rounded" v-for="type in typeList" :key="type.id">
                <a-icon :type="type.icon" style="font-size: 25px;"/>
                <span class="mx-2">{{type.count}}</span>
                <span>{{type.title}}</span>
            </div>
        </div>
        <hr>
        <div class="px-2 d-flex justify-content-around">
            <div ref="population" style="width: 350px;height: 300px;" class="border"></div>
            <div ref="apply" style="width: 350px;height: 300px;" class="border"></div>
            <div class="border h-75 py-3">
                <div class="text-center">月度收入：62.467K</div>
                <br>
                <div class="text-center">月度支出：21.143K</div>
                <br>
                <div class="text-center">月度收支比：2.955</div>
                <br>
                <h2 style="background-color: #ccc" class="px-3">+41.324K 月流水</h2>
            </div>
        </div>
        <div class="border ml-4 mt-2 pt-1" style="width: 68%">
            <div>最近保修请求</div>
            <div class="mx-auto" style="width:90%;height: 105px;margin-bottom: 10px;overflow: auto;">
                <div class="d-flex justify-content-between align-items-center border-bottom" style="height: 35px;">
                    <div>
                        <span class="badge badge-danger mr-1">1</span>
                        <span>XX小区X栋X单元X室电灯维修</span>
                    </div>
                    <div>
                        <span>2020-12-26</span>
                        <span class="badge badge-primary ml-1">已受理</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
export default {
    data:()=>({
        typeList:[
            {
                icon: 'audit',
                count: 30,
                title: '待审批表单',
                id: Math.random()
            },
            {
                icon: 'file-sync',
                count: 14,
                title: '待审批合同',
                id: Math.random()
            },
            {
                icon: 'cloud-download',
                count: 60,
                title: '已归档档案',
                id: Math.random()
            }
        ]
    }),
    beforeDestroy() {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart(){
            const myChart1= echarts.init(this.$refs.population);
            const myChart2 = echarts.init(this.$refs.apply);
            // 指定图表的配置项和数据
            const option1 = {
                backgroundColor: '#2c343c',

                title: {
                    text: 'Customized Pie',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 274, name: '联盟广告'},
                            {value: 235, name: '视频广告'},
                            {value: 400, name: '搜索引擎'}
                        ].sort(function (a, b) { return a.value - b.value; }),
                        roseType: 'radius',
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function () {
                            return Math.random() * 200;
                        }
                    }
                ]
            };
            const option2 = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar'
                }]
            };
            myChart1.setOption(option1);
            myChart2.setOption(option2);
        }
    }
}
</script>

<style scoped>
i + span{
    vertical-align: middle;
}
</style>
